<template>
    <div class="photoinfo_contanier">
        <!-- 标题 -->
        <h3>{{photoinfo.title}}</h3>
        <p class="subtitle">
            <span>发表时间：{{photoinfo.add_time | dateFormat}}</span>
            <span>点击：{{photoinfo.click}}次</span>
        </p>

        <hr>
        <!-- 缩略图 -->
        <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        <!-- 内容 -->
        <div class="content" v-html="photoinfo.content"></div>
        <!-- 评论区 -->
        <cmt-box :id="id"></cmt-box>
    </div>
</template>

<script>
import comments from './../subcomponents/comments.vue'
export default {
    data() {
        return {
            id: this.$route.params.id,
            photoinfo: {},
            slide1: []
        }
    },
    created() {
        this.getPhotoInfo()
        this.getthumimages()
    },
    methods: {
        getPhotoInfo() {//获取图片具体内容
            this.$http.get('api/getimageInfo/' + this.id).then(res =>{
                if(res.body.status === 0) {
                    this.photoinfo = res.body.message[0]
                }
            }, res => {
                this.photoinfo = {
                        id: 50,
                        title: '翟天临公开发表致歉信',
                        add_time: '2015-06-16T03:50:28.000Z',
                        zhaiyao: '北电博士翟天临因“不知知网”牵扯出40%的论文查重率，被疑学术造假。北电北大两校相继发声，成立调查组，本人发致歉信称退出博士后工作，配合调查。',
                        click: 3,
                        content: `<!DOCTYPE html>
                                    <html lang="en">

                                    <head>
                                        <meta charset="UTF-8">
                                        <meta name="viewport" content="width=device-width, initial-scale=1.0">
                                        <meta http-equiv="X-UA-Compatible" content="ie=edge">
                                        <title>Document</title>
                                        <style>
                                            body{
                                                font-size: 12px;
                                                color: #666;
                                                padding: 0 10px;
                                            }
                                            
                                        </style>
                                    </head>

                                    <body>
                                        <img src="https://p1.ifengimg.com/2019_07/4219451E3F56AADBAE0871FEFA6DBD77D4444FE4_w640_h346.jpg" alt="">
                                        <h5>翟天临</h5>
                                        <div>


                                            <p>14日，翟天临公开发表致歉信，近期网络上因其论文情况而引发的讨论让其懊悔不已、深度自责，并进行了深刻反思。

                                                翟天临表示，出于对学习的重视，他决定攻读研究生。研究生就读期间，参加了一系列影视作品的拍摄，并有幸取得了一点成绩，从那时起，内心开始飘飘然，这种不良心态被带入论文写作过程中，导致自己忘记了初衷。同时，翟天临还向被其影响到的相关论文作者道歉。

                                                翟天临表示，愿意积极配合学院的一切调查，毫无推卸地承担责任并接受学院做出的一切决定。并表示申请退出北京大学博士后科研流动站的相关工作。

                                                最后，翟天临向学校、师长、粉丝以及社会大众道歉，并恳求大家原谅他“这个曾经被虚荣心作祟的年轻人。”</p>

                                            <p>全文内容如下：</p>

                                            <p>近期网络上因我论文情况而引发的讨论，让我懊悔不已、深度自责。</p>

                                            <p>在这几天的舆论声讨和批判中，我深刻反思了自己的思想与言行。虚荣心和侥幸心让我迷失了自己。是我的不当行为，让学校声誉被连累、让学术风气被影响、让公众的信任被辜负。我深感自责和内疚。

                                                作为一名青年演员，我一直希望有足够的文化素养和理论基础来支撑自己的表演，这也是我向往学术的初衷。正是出于对学习的重视，我决定攻读研究生。研究生就读期间，我参加了一系列影视作品的拍摄，并有幸取得了一点成绩。从那时起，我内心开始飘飘然，开始吹嘘自己，这种不良心态还被我带入到论文写作过程中，这促使我内心始终心存侥幸，忘记了初衷。我本应牢记，诚信是一切的准则。在此，我也要向被我影响到的相关论文作者真诚道歉。

                                                北京电影学院是我最为感恩的母校。我愿意积极配合学院的一切调查，毫无推卸地承担我的责任并接受学院做出的一切决定。

                                                北京大学是我最为向往的殿堂。我充满歉意地向光华管理学院提出，我正式申请退出北京大学博士后科研流动站的相关工作。

                                                如果没有大家这次的严厉批评与斥责，我曾经误以为自己已经到达了某一个阶段的彼岸，现在才发现，其实我是误入了歧途，距离目标还很远很远。我真诚地恳求大家原谅我这个曾经被虚荣心作祟的年轻人。

                                                最后，我再以万分之诚意，向学校、向爱护我的师长，以及社会大众郑重道歉。还有一直支持我的粉丝们，对不起让你们失望了。请大家相信，我必将以此为鉴，用最严谨的态度与行动，踏踏实实、认认真真对待每一件事，勤勤恳恳、本本分分做好自己。</p>

                                            <p>翟天临</p>

                                            <p>2019年2月14日</p>
                                        </div>
                                    </body>

                                    </html>`
                    }
            })
        },
        getthumimages() {//获取图片分享详情中的缩略图数组
            this.$http.get('api/getthumimages/' + this.id).then(res => {
                if(res.body.status === 0) {
                    res.body.message.forEach(element => {
                        element.w = 600
                        element.h = 400
                    })
                    this.slide1 = res.body.message
                }
            }, res => {
                this.slide1 = [
                    {
                        src: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg',
                        msrc: 'https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg',
                        alt: 'picture1',
                        title: 'Image Caption 1',
                        w: 600,
                        h: 400
                    },
                    {
                        src: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg',
                        msrc: 'https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg',
                        alt: 'picture2',
                        title: 'Image Caption 2',
                        w: 1200,
                        h: 900
                    }
                ]
            })
        },
        handleClose () {//关闭图片预览后
            
        }
    },
    components: { //注册 评论区组件
        "cmt-box": comments
    }
}
</script>

<style lang="scss">
    .photoinfo_contanier{
        padding: 3px;
        h3{
            color: #226aff;
            font-size: 15px;
            text-align: center;
            margin: 15px 0;
        }
        .subtitle{
            display: flex;
            justify-content: space-between;
            font-size: 13px;
        }
        .content{
            font-size: 13px;
            line-height: 30px;
        }
        img{
            width: 100%;
        }
    }
</style>
